import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Form, Input, DatePicker, Select, Button, Card, InputNumber, Radio, Icon, Tooltip,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './style.less';

const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;

@connect(state => ({
    setting: state.setting,
}))
@Form.create()
export default class Setting extends PureComponent {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.dispatch({
          type: 'setting/save',
          payload: values,
        });
      }
    });
  }
    componentDidMount() {
        this.props.dispatch({
            type: 'setting/fetchConfig'
        });
    }

  render() {
    const { setting:{loading,config} } = this.props;
    const { getFieldDecorator, getFieldValue } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <PageHeaderLayout title="配置" content="配置设置">
        <Card bordered={false}>
          <Form
            onSubmit={this.handleSubmit}
            hideRequiredMark
            style={{ marginTop: 8 }}
          >
            <FormItem
              {...formItemLayout}
              label="分销状态"
            >
              {getFieldDecorator('status', {
                rules: [{
                  required: true,
                }],initialValue:config.status
              })(
                  <Radio.Group>
                      <Radio value={1}>启用</Radio>
                      <Radio value={0}>禁用</Radio>
                  </Radio.Group>
              )}
            </FormItem>
            <FormItem
                {...formItemLayout}
                label="平台分成比例"
            >
                {getFieldDecorator('fc', {

                    initialValue:config.fc
                })(
                    <InputNumber min={0} max={100} />
                )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="分销分成百分比例"
            >
              {getFieldDecorator('fx', {

                  initialValue:config.fx
              })(
               <InputNumber min={0} max={100} />
              )}
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button loading={loading} type="primary" htmlType="submit" >
                保存
              </Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}
